<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NenmorphismCSS-Examplepage</title>
    <link rel="stylesheet" href="./css/style.css">
    <link rel="stylesheet" href="NeumorphismCSS.css">
</head>

<body>

    <div class="container ">
        <h1 class="n-h1" style="text-align: center;color: #868a9a;text-shadow: 1px 1px 0 #fff;">NenmorphismCSS</h1>
        <div class="container mt-2">
            <div class=" shadow-concave border-sm" style="margin-bottom: 2rem;">
                <div class="card-body">
                    <a class="btn btn-primary btn-link border" style="margin-right: 1rem;" target="_blank" href="https://www.mmcee.cn">MyWebsite</a>
                    <a class="btn btn-primary btn-link border" style="margin-right: 1rem;" target="_blank" href="https://github.com/ERHECY/NenmorphismCSS">Star</a>
                </div>
            </div>

        </div>

        <h2 class="n-h2">卡片</h2>
        <div class="shadow border-sm" style="margin-bottom: 2rem;">
            <div class="card-body">
                <h3>card 凸</h3>
            </div>

        </div>

        <div class=" shadow-concave border-sm" style="margin-bottom: 2rem;">
            <div class="card-body">
                <h3>card 凹</h3>
            </div>
        </div>

        <h3 class="n-h3">一些例子</h3>
        <div class="row row-cols-1 row-cols-sm-2 row-cols-xl-4">
            <div class="col">
                <div class="shadow border-sm" style="margin-bottom: 1rem;">
                    <div class="card-top-p">
                        <img class=" border-sm img" src="https://dll.mmcee.cn/78717395_p0.png" alt="demo">
                    </div>
                    <div class="card-body">

                        <h2 class="card-title ">TITLE</h2>

                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae, sint culpa reiciendis ut amet doloremque ad numquam, optio commodi aspernatur asperiores porro autem rerum debitis impedit deserunt nesciunt inventore ea.</p>
                        <div style="text-align: right;">
                            <a class="btn btn-link btn-primary border" style="margin-top: 1rem;" href="">MORE</a>
                        </div>

                    </div>
                </div>
            </div>

            <div class="col">
                <div class="shadow border-sm" style="margin-bottom: 1rem;">
                    <div class="card-top">
                        <img class=" border-sm-t img" src="https://dll.mmcee.cn/78717395_p0.png" alt="demo">
                    </div>
                    <div class="card-body">
                        <h2 class="card-title ">TITLE</h2>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae, sint culpa reiciendis ut amet doloremque ad numquam, optio commodi aspernatur asperiores porro autem rerum debitis impedit deserunt nesciunt inventore ea.</p>
                        <div style="text-align: right;">
                            <a class="btn btn-link btn-secondary border" style="margin-top: 1rem;" href="">MORE</a>
                        </div>
                    </div>
                </div>

            </div>
            <div class="col">
                <div class="shadow border-sm" style="margin-bottom: 1rem;">
                    <div class="card-top-p">
                        <img class=" border-sm shadow-sm img" src="https://dll.mmcee.cn/78717395_p0.png" alt="demo">
                    </div>
                    <div class="card-body">
                        <h2 class="card-title ">TITLE</h2>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae, sint culpa reiciendis ut amet doloremque ad numquam, optio commodi aspernatur asperiores porro autem rerum debitis impedit deserunt nesciunt inventore ea.</p>
                        <div style="text-align: right;">
                            <a class="btn btn-link btn-default border" style="margin-top: 1rem;" href="">MORE</a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col">
                <div class="shadow  shadow-concave border-sm" style="margin-bottom: 1rem;">
                    <div class="card-top-p">
                        <img class=" border-sm shadow img" src="https://dll.mmcee.cn/78717395_p0.png" alt="demo">
                    </div>
                    <div class="card-body">
                        <h2 class="card-title ">TITLE</h2>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae, sint culpa reiciendis ut amet doloremque ad numquam, optio commodi aspernatur asperiores porro autem rerum debitis impedit deserunt nesciunt inventore ea.</p>
                    </div>
                </div>

            </div>
            <div class="col">
                <div class="shadow-sm border-sm" style="margin-bottom: 1rem;">
                    <div class="card-top-p">
                        <img class=" border-sm shadow img" src="https://dll.mmcee.cn/78717395_p0.png" alt="demo">
                    </div>
                    <div class="card-body">
                        <h2 class="card-title ">TITLE</h2>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae, sint culpa reiciendis ut amet doloremque ad numquam, optio commodi aspernatur asperiores porro autem rerum debitis impedit deserunt nesciunt inventore ea.</p>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="shadow-sm border-sm" style="margin-bottom: 1rem;">
                    <div class="card-top">
                        <img class=" border-sm-t   img" src="https://dll.mmcee.cn/78717395_p0.png" alt="demo">
                    </div>
                    <div class="card-body">
                        <h2 class="card-title ">TITLE</h2>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae, sint culpa reiciendis ut amet doloremque ad numquam, optio commodi aspernatur asperiores porro autem rerum debitis impedit deserunt nesciunt inventore ea.</p>
                    </div>
                </div>
            </div>

            <div class="col">
                <div class="shadow-sm border-sm" style="margin-bottom: 1rem;">
                    <div class="card-top-p">
                        <img class=" border-sm  img" src="https://dll.mmcee.cn/78717395_p0.png" alt="demo">
                    </div>
                    <div class="card-body">
                        <h2 class="card-title ">TITLE</h2>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae, sint culpa reiciendis ut amet doloremque ad numquam, optio commodi aspernatur asperiores porro autem rerum debitis impedit deserunt nesciunt inventore ea.</p>
                    </div>
                </div>

            </div>
            <div class="col">
                <div class="shadow-sm border-sm" style="margin-bottom: 1rem;">
                    <div class="card-top-p">
                        <img class=" border-sm shadow-sm  img" src="https://dll.mmcee.cn/78717395_p0.png" alt="demo">
                    </div>
                    <div class="card-body">
                        <h2 class="card-title ">TITLE</h2>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae, sint culpa reiciendis ut amet doloremque ad numquam, optio commodi aspernatur asperiores porro autem rerum debitis impedit deserunt nesciunt inventore ea.</p>
                    </div>
                </div>
            </div>



        </div>

        <h4 class="n-h4">
            图片来源 https://www.pixiv.net/artworks/78717395
        </h4>
        <h2 class="n-h2">button 按钮 </h2>
        <button class="btn btn-default border" style="margin: 1rem;" href="#">Default</button>
        <button class="btn btn-sm btn-default border" style="margin: 1rem;" href="#">Default 小</button>
        <button class="btn btn-default border" style="margin: 1rem;" href="#" disabled>Default disabled</button>
        <button class="btn btn-default btn-full border" href="#">Default</button>
        <br>
        <button class="btn btn-primary border" style="margin: 1rem;" href="#">Primary</button>
        <button class="btn btn-sm btn-primary border" style="margin: 1rem;" href="#">Primary 小</button>
        <button class="btn btn-primary border" style="margin: 1rem;" href="#" disabled>Primary disabled</button>
        <br>
        <button class="btn btn-primary btn-full border" href="#">Primary</button>
        <br>
        <button class="btn btn-secondary border" style="margin: 1rem;" href="#">secondary</button>
        <button class="btn btn-sm btn-secondary border" style="margin: 1rem;" href="#">secondary 小</button>
        <button class="btn btn-secondary border" style="margin: 1rem;" href="#" disabled>secondary disabled</button>
        <br>
        <button class="btn btn-secondary btn-full border" href="#">secondary</button>
        <br>
        <button class="btn btn-success border" style="margin: 1rem;" href="#">success</button>
        <button class="btn btn-sm btn-success border" style="margin: 1rem;" href="#">success 小</button>
        <button class="btn btn-success border" style="margin: 1rem;" href="#" disabled>success disabled</button>
        <br>
        <button class="btn btn-success btn-full border" href="#">success</button>
        <br>
        <button class="btn btn-warning border" style="margin: 1rem;" href="#">warning</button>
        <button class="btn btn-sm btn-warning border" style="margin: 1rem;" href="#">warning 小</button>
        <button class="btn btn-warning border" style="margin: 1rem;" href="#" disabled>warning disabled</button>
        <br>
        <button class="btn btn-warning btn-full border" href="#">warning</button>
        <br>
        <button class="btn btn-danger border" style="margin: 1rem;" href="#">danger</button>
        <button class="btn btn-sm btn-danger border" style="margin: 1rem;" href="#">danger 小</button>
        <button class="btn btn-danger border" style="margin: 1rem;" href="#" disabled>danger disabled</button>
        <br>
        <button class="btn btn-danger btn-full border" href="#">danger</button>
        <br>
        <h3 class="n-h3"> 按钮清除阴影缩放动画</h3>

        <button class="btn btn-default btn-cleary  border" style="margin: 1rem;" href="#">Default</button>

        <button class="btn btn-primary btn-cleary  border" style="margin: 1rem;" href="#">primary</button>

        <button class="btn btn-secondary  btn-cleary  border" style="margin: 1rem;" href="#">secondary</button>

        <button class="btn btn-success btn-cleary  border" style="margin: 1rem;" href="#">success</button>

        <button class="btn btn-warning  btn-cleary  border" style="margin: 1rem;" href="#">warning</button>

        <button class="btn btn-danger btn-cleary  border" style="margin: 1rem;" href="#">danger</button>


        <h3 class="n-h3">按钮 超链接</h3>
        <a class="btn btn-default btn-link border" style="margin: 1rem;" href="#">Default</a>
        <a class="btn btn-primary btn-link border" style="margin: 1rem;" href="#">Primary</a>
        <a class="btn btn-secondary btn-link border" style="margin: 1rem;" href="#">secondary</a>
        <a class="btn btn-success btn-link border" style="margin: 1rem;" href="#">success</a>
        <a class="btn btn-warning btn-link border" style="margin: 1rem;" href="#">warning</a>
        <a class="btn btn-danger btn-link border" style="margin: 1rem;" href="#">danger</a>

        <h2 class="n-h2">圆角</h2>

        <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4" style="margin: 1rem;">
            <div class="col">
                <div class="shadow border" style="margin: 1rem;">
                    <div class="card-body">
                        <h3>普通圆角</h3>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="shadow border-sm" style="margin: 1rem;">
                    <div class="card-body">
                        <h3>较小圆角</h3>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="shadow border-lg" style="margin: 1rem;">
                    <div class="card-body">
                        <h3>较大圆角</h3>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="shadow border-all" style="margin: 1rem; width: 100px;  height: 100px; ">
                    <div class="card-body">
                        <h3>全圆</h3>
                    </div>
                </div>
            </div>



        </div>



        <div class="shadow border-t" style="margin: 1rem;">
            <div class="card-body">
                <h3>仅上两角 普通圆角</h3>
            </div>
        </div>

        <div class="shadow border-b" style="margin: 1rem;">
            <div class="card-body">
                <h3>仅下两角 普通圆角</h3>
            </div>
        </div>



        <h2 class="n-h2">分割线</h2>
        <h3 class="n-h3">普通分割线</h3>
        <hr class="divider">
        <h3 class="n-h3">小分割线</h3>
        <hr class="divider divider-sm">
        <h3 class="n-h3">自定义分割线</h3>
        <hr class="divider divider-sm" style="width: 200px;">


        <h2 class="n-h2">阴影</h2>

        <div class=" shadow border-sm" style="margin-bottom: 2rem;">
            <div class="card-body">
                <h3>shadow 凸 普通阴影</h3>
            </div>

        </div>

        <div class=" shadow-concave border-sm" style="margin-bottom: 2rem;">
            <div class="card-body">
                <h3>shadow 凹 普通阴影</h3>
            </div>
        </div>

        <div class="shadow-sm border-sm" style="margin-bottom: 2rem;">
            <div class="card-body">
                <h3>shadow 凸 小阴影</h3>
            </div>
        </div>

        <h2 class="n-h2">表单</h2>

        <form>
            <fieldset class="fieldset">

                <legend class="legend">Legend</legend>

                <div>
                    <input class="input border" type="text" placeholder="明文" style="margin-bottom: 1rem;">
                    <input type="password" class="input border" placeholder="密文" style="margin-bottom: 1rem;">
                </div>

                <div style="margin-bottom: 1rem;">
                    <select class="select">
                        <option>Option 01</option>
                        <option>Option 02</option>
                    </select>
                </div>

                <div style="margin-bottom: 1rem;">
                    <textarea class="textarea border-sm" rows="5" placeholder="Textarea"></textarea>
                </div>

                <div style="margin-bottom: 1rem;">
                    <label class="radio-label"><input class="radio" type="radio" name="radio" checked> checked</label>
                    <label class="radio-label"><input class="radio" type="radio" name="radio"> unchecked</label>
                    <label class="radio-label"><input class="radio" type="radio" name="radio" disabled> disabled</label>
                </div>

                <div style="margin-bottom: 1rem;">
                    <label class="checkbox-label"><input class="checkbox" type="checkbox" checked> checked</label>
                    <label class="checkbox-label"><input class="checkbox" type="checkbox"> unchecked</label>
                    <label class="checkbox-label"><input class="checkbox" type="checkbox" disabled> disabled</label>
                </div>

                <div style="margin-bottom: 1rem;">
                    <input class="range" type="range" value="2" min="0" max="10" step="0.1">
                </div>

            </fieldset>
        </form>


        <h2 class="n-h2">进度条</h2>

        <div class="progress">
            <div class="progress-back"></div>
            <div class="progress-line" style="width: 20%;"></div>
        </div>


        <h2 class="n-h2">图片</h2>
        <img src="https://api.mmcee.cn/acgimg/acgurl.php" class="img shadow" width="600px" alt="shadow">

    </div>

</body>

</html>